<template>
	<div class="clearfix up-box">
		<div class="up-img-view" v-for="(item, index) in Fimages" :key="index">
			<block v-if="item">
				<image class="cata-img" :src="item" mode="aspectFill"></image>
				<text class="custom-icon custom-icon-ic_searchclosed del-icon" @click="handleRemove(item, index)"></text>
			</block>
		</div>
		<div @click="uploadAva" class="upload-btn"><text class="custom-icon custom-icon-xinzeng"></text></div>
	</div>
</template>

<script>
import webUrl from '@/common/config.js';
import qiniuUploader from './qiniuUploader.js';
export default {
	data() {
		return {
			Fimages: [],
			qn_token: '',
			uploadType : 'local'
		};
	},
	computed: {
		enToken() {
			return this.$store.state.enToken;
		}
	},
	props: {
		images: {
			type: Array,
			default: () => {
				return [];
			}
		},
		//最多可以选择的图片张数，默认9
		count: {
			type: Number,
			default: 9
		},
		// album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
		sourceType: {
			type: Array,
			default: () => {
				return ['album', 'camera'];
			}
		}
	},
	watch: {
		images(val) {
			this.Fimages = val;
		}
	},
	created() {
		this.Fimages = this.images;
		if ( this.$store.state.getStorage.type ){
			this.uploadType = this.$store.state.getStorage.type;
		}
		// 获取七牛token（如果使用七牛云上传）
		if (this.uploadType == 'qiniu') {
			this.getQiniuToken();
		}
	},
	methods: {
		getQiniuToken() {
			this.$u.api
				.uploadToken({
					bucket: '',
					key: 0
				})
				.then(res => {
					this.qn_token = res.data;
				});
		},
		// 移除图片
		async handleRemove(url, index) {
			this.Fimages.splice(index, 1);
			this.$emit('handleRemove', this.Fimages);
			
			// 如果是本地上传，不需要删除七牛云文件
			if (this.uploadType === 'local') {
				return;
			}
			
			// 以下是七牛云删除逻辑
			return; // 注意：原代码中这里有return，所以下面的代码实际上不会执行
			const urlArr = url.split('/');
			const nameSlice = urlArr[urlArr.length - 6];

			let name = '';
			if (urlArr[urlArr.length - 1] === '750') {
				name = nameSlice.slice(0, nameSlice.indexOf('?'));
			} else {
				name = urlArr[urlArr.length - 1];
			}
			let key = `${this.enToken}/${name}`;
			this.$u.api
				.UploadDel({
					bucket: webUrl.QINIU_KEY,
					key: key
				})
				.then(res => {});
		},
		// 上传头像
		uploadAva() {
			uni.chooseImage({
				count: this.count,
				sourceType: this.sourceType, //从相册选择
				success: async res => {
					res.tempFilePaths.forEach(imgPath => {
						this.upImg(imgPath);
					});
				}
			});
		},
		// 请求上传图片接口
		async upImg(imgPath) {
			const imgName = imgPath.split('/')[imgPath.split('/').length - 1];
			const key = `${this.enToken}/${imgName}`; //图片和企业token拼接 为自定义文件名
			
			uni.showLoading({
				title: '上传中...'
			});
			// 根据配置选择上传方式
			if (this.uploadType === 'local') {
				// 本地上传
				qiniuUploader.upload(
					imgPath,
					res => {
						uni.hideLoading();
						// 使用返回的URL
						this.$emit('uploadSuccess', res.fileUrl);
					},
					error => {
						uni.hideLoading();
						uni.showToast({
							title: '上传失败',
							icon: 'none'
						});
					},
					{
						region: 'SCN' ,// 保留region参数，但实际上本地上传不会使用,
						storageType : 'local'
					},
					res => {
						// 上传进度
						if (res.progress === 100) {
							// 上传完成
						}
					}
				);
			} else {
				// 七牛云上传
			
				let token = this.qn_token; //token为七牛云的token一般由后台接口提供
				qiniuUploader.upload(
					imgPath,
					res => {
						uni.hideLoading();
						this.$emit('uploadSuccess', this.$store.state.getStorage.config.domain+`/${res.key}`);
					},
					error => {
						uni.hideLoading();
						uni.showToast({
							title: '上传失败：' + error.error,
							icon: 'none'
						});
					},
					{
						region: this.$store.state.getStorage.config.region, // （必须填写正确）ECN, SCN, NCN, NA, ASG，分别对应七牛的：华东，华南，华北，北美，新加坡 5 个区域
						domain: this.$store.state.getStorage.config.domain, // bucket 域名，下载资源时用到
						key: key, // [非必须]自定义文件 key
						uptoken: token ,// 由其他程序生成七牛 uptoken
						storageType : 'qiniu'
					},
					res => {
						//上传进度
						if (res.progress === 100) {
							// 上传完成
						}
					}
				);
			}
		}
	}
};
</script>

<style scoped lang="scss">
.up-box {
	display: inline-block;
	.cata-img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
		display: block;
	}
	.upload-btn {
		width: 120rpx;
		height: 120rpx;
		text-align: center;
		line-height: 120rpx;
		background-color: #f4f5f6;
		border-radius: 8rpx;
		color: #606266;
		display: inline-block;
		vertical-align: middle;
		.custom-icon-xinzeng {
			font-size: 44rpx;
		}
	}
	.up-img-view {
		position: relative;
		display: inline-block;
		vertical-align: middle;
		.del-icon {
			position: absolute;
			color: $uni-color-error;
			right: 0;
			top: -20upx;
			font-size: 40rpx;
			background-color: #ffffff;
			width: 40rpx;
			height: 40rpx;
			border-radius: 100%;
			line-height: 40rpx;
		}
	}
}
</style>
